{% extends "index.html" %}
{% block title %}
    员工管理
{% endblock %}
{% block linkcss %}
    {{ super() }}
    <script type="text/javascript" src="{{ url_for('static', filename='css/jquery.dataTables.min.css') }}"></script>
{% endblock %}
{% block page_nav %}
    <li>员工</li>
    <li>员工管理</li>
{% endblock %}
{% block content %}
	<!--查询条件-->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <form class="form-horizontal" method="POST"
                          action="{{ url_for('view.employee_manage') }}" id="form">
                        <div class="form-group" style="margin-left: 15px">
                            <label class="control-label col-md-1" for="name">姓名</label>
                            <div class="col-md-2">
                                <input id="name" class="form-control" type="text" name="name" placeholder="姓名">
                            </div>
                            <label class="control-label col-md-1" for="email">Email</label>
                            <div class="col-md-3">
                                <input id="email" class="form-control" type="email" name="email" placeholder="Email">
                            </div>
                            <label class="control-label col-md-1" for="phoneNumber">手机号码</label>
                            <div class="col-md-3">
                                <input id="phoneNumber" class="form-control" type="text" name="phoneNumber" placeholder="手机号码"
                                       pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$" title="11位手机号码">
                            </div>
                        </div>
                        <div class="form-group" style="margin-left: 15px">
                            <label class="control-label col-md-1" for="certificateType">证书类型</label>
                            <div class="col-md-2">
                                <select id="certificateType" name="certificateType" class="form-control">
                                    <option value="A1">A1</option>
                                    <option value="A2">A2</option>
                                    <option value="A3">A3</option>
                                    <option value="A4">A4</option>
                                    <option value="T1">T1</option>
                                </select>
                            </div>
                            <label class="control-label col-md-1" for="certificateNumber">证书号码</label>
                            <div class="col-md-3">
                                <input id="certificateNumber" class="form-control" type="text" name="certificateNumber" placeholder="证书号码">
                            </div>
                            <label class="control-label col-md-1" for="jobType">工作职责</label>
                            <div class="col-md-3">
                                <input id="jobType" class="form-control" type="text" name="jobType" placeholder="工作职责">
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-md-2 col-md-offset-4">
                                    <button class="btn btn-primary icon-btn" type="submit" id="new_input"><i
                                            class="fa fa-fw fa-lg fa-check-circle"></i>查询
                                    </button>
                                </div>
                                <div class="col-md-2 col-md-offset-1">
                                    <button class="btn btn-primary icon-btn" type="reset"><i
                                            class="fa fa-fw fa-lg fa-refresh"></i>重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--查询结果显示表格-->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered" id="sampleTable">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>员工编号</th>
                                <th>姓名</th>
                                <th>Email</th>
                                <th>手机号码</th>
                                <th>证件类型</th>
                                <th>证件号码</th>
                                <th>工作职责</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                                {% for id, employee in employees %}
                                    <tr>
                                        <td>{{ id+1 }}</td>
                                        <td>{{ employee.employeeId }}</td>
                                        <td>{{ employee.name }}</td>
                                        <td>{{ employee.email }}</td>
                                        <td>{{ employee.phoneNumber }}</td>
                                        <td>{{ employee.certificateType }}</td>
                                        <td>{{ employee.certificateNumber }}</td>
                                        <td>{{ employee.jobType }}</td>
                                        <td>
                                            <a href="" target="_blank"
                                            data-toggle="modal" data-target="#myModal_update{{ id+1 }}">更新</a>
                                            &nbsp&nbsp&nbsp&nbsp
                                            <!-- 更新弹出页面 -->
                                            <div class="modal fade" id="myModal_update{{ id+1 }}" tabindex="-1" role="dialog"
                                                 aria-labelledby="myModalLabel">
                                                <div class="modal-dialog modal-lg" role="document">
                                                    <div class="modal-content">
                                                        <form class="form-horizontal" method="POST"
                                                                  action="{{ url_for('view.employee_update') }}" id="form_update">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-label="Close"><span aria-hidden="true">&times;</span>
                                                                </button>
                                                                <h4 class="modal-title" id="myModalLabel">员工信息更新</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                <table class="table">
                                                                    <tbody>
                                                                    <tr>
                                                                        <td hidden>
                                                                            <label class="control-label selected" for="name">员工编号</label>
                                                                        </td>
                                                                        <td hidden>
                                                                            <input id="employeeId" class="form-control" type="text" name="employeeId" placeholder="员工编号" required value="{{ employee.employeeId }}">
                                                                        </td>
                                                                        <td>
                                                                            <label class="control-label selected" for="name">姓名</label>
                                                                        </td>
                                                                        <td>
                                                                            <input id="name" class="form-control" type="text" name="name" placeholder="姓名" required value="{{ employee.name }}">
                                                                        </td>
                                                                        <td>
                                                                            <label class="control-label" for="email">Email</label>
                                                                        </td>
                                                                        <td>
                                                                            <input id="email" class="form-control" type="email" name="email" placeholder="Email" required value="{{ employee.email }}">
                                                                        </td>
                                                                        <td>
                                                                            <label class="control-label" for="phoneNumber">手机号码</label>
                                                                        </td>
                                                                        <td>
                                                                            <input id="phoneNumber" class="form-control" type="text" name="phoneNumber" placeholder="手机号码" required
                                                                                   pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$" title="11位手机号码" value="{{ employee.phoneNumber }}">
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            <label class="control-label" for="certificateType">证书类型</label>
                                                                        </td>
                                                                        <td>
                                                                            <input id="certificateType" class="form-control" type="text" name="certificateType" placeholder="证书类型" required value="{{ employee.certificateType }}">
                                                                        </td>
                                                                        <td>
                                                                            <label for="certificateNumber">证书号码</label>
                                                                        </td>
                                                                        <td>
                                                                            <input id="certificateNumber" class="form-control" type="text" name="certificateNumber" placeholder="证书号码" required value="{{ employee.certificateNumber }}">
                                                                        </td>
                                                                        <td>
                                                                            <label class="control-label" for="jobType">工作职责</label>
                                                                        </td>
                                                                        <td>
                                                                            <input id="jobType" class="form-control" type="text" name="jobType" placeholder="工作职责" required value="{{ employee.jobType }}">
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <div class="col-md-2 col-md-offset-3">
                                                                    <button class="btn btn-primary icon-btn" type="submit" id="bt_update"><i
                                                                            class="fa fa-fw fa-lg fa-check-circle"></i>确定
                                                                    </button>
                                                                </div>
                                                                <div class="col-md-2 col-md-offset-1">
                                                                    <a class="btn btn-default" data-dismiss="modal">取消</a>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                            <a href="" data-toggle="modal" data-target="#myModal_del{{ id+1 }}">删除</a>
                                            <!-- 删除弹出页面 -->
                                            <div class="modal fade" id="myModal_del{{ id+1 }}" tabindex="-1" role="dialog"
                                                 aria-labelledby="myModalLabel">
                                                <div class="modal-dialog modal-sm" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header alert alert-danger">
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close"><span aria-hidden="true">&times;</span>
                                                            </button>
                                                            <h4 class="modal-title" id="myModalLabel">提示</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <span>删除编号为{{ employee.employeeId }}的员工信息？</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <div class="col-md-3 col-md-offset-2">
                                                                <a class="btn btn-danger" href="{{ url_for('view.employee_del', employee_id=employee.employeeId) }}">确定</a>
                                                            </div>
                                                            <div class="col-md-2 col-md-offset-2">
                                                                <a class="btn btn-default" data-dismiss="modal">取消</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
<!-- Javascripts-->
{% block script %}
	{{ super() }}
    {#  表格插件 dataTables  #}
    <script type="text/javascript" src="{{ url_for('static', filename='js/dataTables/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/dataTables/dataTables.bootstrap.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 表格插件初始化
            var table = $('#sampleTable').DataTable({
                "language": {
                    "url": "{{ url_for('static', filename='js/dataTables/Chinese.json') }}"
                },
            });
        } );
    </script>
{% endblock %}